<!-- 通知详情 -->
<script setup>
import { reactive, ref, toRefs, watch } from 'vue';
import { Download } from '@element-plus/icons-vue';
import { ElDialog, ElImage, ElIcon, ElMessage } from 'element-plus';
import { BASE_FILE_PATH } from '@/apis/index';
import { handleDownload } from '@/common/common-helper';

const props = defineProps({
  detailTShowDialog: Boolean,
  detailLookInfo: Object,
  selectState: String,
});
const { detailTShowDialog, detailLookInfo } = toRefs(props);
const emit = defineEmits(['closeDetailDialog']);
const initialIndexImage = ref(0);
const notificationItem = ref({});

const closeDetailDialog = () => {
  emit('closeDetailDialog');
};

const fire_icon = reactive({
  pdf_icon: new URL('../../assets/images/icon/pdf.png', import.meta.url).href,
  doc_icon: new URL('../../assets/images/icon/doc.png', import.meta.url).href,
  docx_icon: new URL('../../assets/images/icon/docx.png', import.meta.url).href,
  xls_icon: new URL('../../assets/images/icon/xls.png', import.meta.url).href,
  xlsx_icon: new URL('../../assets/images/icon/xlsx.png', import.meta.url).href,
});

const srcList = ref([]);
const srcFireList = ref([]);

const onPreviewImg = (i) => {
  initialIndexImage.value = i;
};

watch(
  detailLookInfo,
  (val) => {
    notificationItem.value = val;

    srcList.value = detailLookInfo.value?.picture?.map((item) => {
      return `${BASE_FILE_PATH}${item.object}`;
    });

    srcFireList.value = detailLookInfo.value?.annex?.map((item) => {
      return `${BASE_FILE_PATH}${item.object}`;
    });
  },
  { deep: true },
);

/**
 * @description: 下载
 * @param {*}
 * @return {*}
 */
const handleDownFile = (item) => {
  let isOk = handleDownload(`/midongqu/static/${item.object}`, item.filename);

  if (isOk) {
    ElMessage({
      type: 'success',
      message: '下载成功！',
    });
  } else {
    return ElMessage({
      type: 'error',
      message: '下载失败！',
    });
  }
};
</script>
<template>
  <div class="detail_root">
    <ElDialog
      :title="'查看通知'"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
      top="115px"
      :model-value="detailTShowDialog"
      :align-center="true"
      @close="closeDetailDialog()"
    >
      <main>
        <div class="fields_item">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标题</span>
          <span>{{ notificationItem?.title }}</span>
        </div>
        <div class="fields_item">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;内容</span>
          <span>{{ notificationItem?.content }}</span>
        </div>
        <div class="fields_item">
          <span>创建时间</span>
          <span>{{ notificationItem?.createdDate }}</span>
        </div>
        <div class="fields_item">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;照片</span>
          <span class="img_Preview">
            <ElImage
              v-for="(ite, index) in notificationItem?.picture"
              :key="index"
              class="img"
              :infinite="false"
              :src="`${BASE_FILE_PATH}${ite.object}`"
              :zoom-rate="1.2"
              :initial-index="initialIndexImage"
              :preview-src-list="srcList"
              fit="cover"
              hide-on-click-modal
              @show="onPreviewImg(index)"
            />
          </span>
        </div>
        <div class="fields_item">
          <span>文档附件</span>
          <div class="fire_box">
            <div v-for="(item, index) in notificationItem?.annex" :key="index" class="fire_item">
              <p class="fire_img">
                <img
                  :src="
                    item.object.split('.')[item.object.split('.').length - 1] == 'doc'
                      ? fire_icon.doc_icon
                      : item.object.split('.')[item.object.split('.').length - 1] == 'docx'
                      ? fire_icon.docx_icon
                      : item.object.split('.')[item.object.split('.').length - 1] == 'pdf'
                      ? fire_icon.pdf_icon
                      : item.object.split('.')[item.object.split('.').length - 1] == 'xls'
                      ? fire_icon.xls_icon
                      : fire_icon.xlsx_icon
                  "
                />
                <span :title="item.filename">{{ item.filename }}</span>
              </p>
              <p class="fire_down" @click="handleDownFile(item)">
                <ElIcon><Download /></ElIcon>
              </p>
            </div>
          </div>
        </div>
      </main>
    </ElDialog>
  </div>
</template>

<style scoped lang="scss">
.detail_root {
  :deep(.el-dialog) {
    width: 770px;
    border-radius: 10px;
  }
}
:deep(.el-dialog .el-dialog__header) {
  color: #565656;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid #f8f8f8;
}

main {
  position: relative;
  width: 100%;
  max-height: 700px;
  padding: 16px 64px 84px 50px;
  overflow: auto;
  font-size: 18px;
  &::-webkit-scrollbar {
    display: none;
    width: 0 !important;
  }
  .fields_item {
    display: flex;
    span {
      font-size: 18px;
      line-height: 32px;
    }
    span:first-child {
      display: block;
      min-height: 37px;
      margin-right: 26px;
      margin-bottom: 6px;
      color: #999999;
      font-weight: bold;
      white-space: nowrap;
      text-align-last: right;
    }

    span:nth-child(2) {
      display: block;
      display: flex;
      justify-content: flex-start;
      min-height: 37px;
      margin-bottom: 6px;
      color: #333333;
      text-align-last: left;
    }
  }

  .fire_box {
    width: 100%;

    .fire_img {
      img {
        width: 32px;
        height: 35px;
        margin-right: 13px;
        vertical-align: middle;
      }
      span {
        display: inline-block !important;
        width: 400px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
    }

    .fire_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .fire_down {
      color: #377bf0;
      cursor: pointer;
    }
  }

  .img_Preview {
    display: flex;
    flex-wrap: wrap;
    .img {
      width: 66px;
      height: 66px;
      margin-right: 10px;
      margin-bottom: 10px;
      border-radius: 4px;
    }
  }
}
</style>
